<template>
    <span class="text-container" :style="computedStyle">
      {{ truncatedText }}
    </span>
  </template>
  
  <script>
  export default {
    props: {
      text: {
        type: String,
        required: true
      },
      maxLength: {
        type: Number,
        default: 20 // 默认最大字数为20
      }
    },
    computed: {
      truncatedText() {
        // 如果文本长度超过最大字数，则进行截断
        return this.text.length > this.maxLength
          ? this.text.slice(0, this.maxLength) + '...'
          : this.text;
      },
      computedStyle() {
        return {
          whiteSpace: 'nowrap', // 不换行
          overflow: 'hidden',    // 超出部分隐藏
          textOverflow: 'ellipsis' // 超出部分用省略号表示
        };
      }
    }
  };
  </script>
  
  <style scoped>
  .text-container {
    
  }
  </style>
  